<template>
  <div class="scroll-list-wrapper" ref="wrapper">
    <vue-j-scroll
      v-if="data.length>0"
      ref="JScroll"
      :data="data"
      :style="{height:height+'px'}"
      :steep="steep"
      scrollDirection="top"
      :isRoller="true"
      :rollerScrollDistance="50"
    >
      <slot>
        <ul>
          <li v-for="(item,index) in data" :key="'data'+index" class="row">
            <template v-for="(col,i) in column">
          <span :key="'col'+i" v-if="col.type==='index'" class="number-box">
          <span v-if="index<3" class="number-pic">
            <img :src="require('./images/'+(index+1)+'.png')" alt="">
          </span>
          <span v-else class="number">{{ index + 1 }}</span>
         </span>
              <span :key="'col'+i" v-else class="col">{{ item[col.prop] }}</span>
            </template>
          </li>
        </ul>
      </slot>
    </vue-j-scroll>
    <div class="kong-box" v-if="data.length===0">
      <div class="kong">
        <img src="./images/list-kong.png" alt="">
        <span class="text" v-html="emptyText"></span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default() {
        return []
      }
    },
    steep: {
      type: Number,
      default: 1
    },
    column: {
      type: Array,
      default() {
        return []
      }
    },
    emptyText: {
      type: String,
      default: '暂无数据'
    }
  },
  data() {
    return {
      height: 0,
      hidden: true
    }
  },
  mounted() {
    this.height = parseInt(window.getComputedStyle(this.$refs.wrapper).height)
  },
  watch: {
    data: {
      handler() {
        this.$refs.JScroll?.stop()
      },
      deep: true
    },
    height() {
      if (this.height > 0) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.hidden = false
          }, 20)
        })
      } else {
        this.hidden = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.scroll-list-wrapper {
  width: 100%;
  height: 100%;
  > .kong-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0B274F;
    > .kong {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      > img {
        display: block;
        margin: 0 auto;
        height: 216px;
        max-height: calc(100% - 46px);
        object-fit: contain;
      }
      .text {
        text-align: center;
        display: block;
        font-size: 16px;
        height: 16px;
        line-height: 16px;
        margin-top: 30px;
        color: #8FEFFF;
      }
    }
  }
  &.hideen {
    visibility: hidden;
  }
  .row {
    margin-top: 6px;
    display: flex;
    height: 35px;
    line-height: 35px;
    &:nth-child(odd) {
      background: linear-gradient(90deg, rgba(10, 142, 255, 0.15) 0%, rgba(10, 142, 255, 0.34) 53%, rgba(10, 142, 255, 0.15) 100%);
    }
  }
  .col {
    // flex: 1;
    color: rgba(143, 239, 255, 0.8);
    font-size: 18px;
    text-align: center;
  }
  .col:nth-child(odd) {
    // background: red;
    // width: 30%;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .col:nth-child(even) {
    // background: pink;
    width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .number-box {
    width: 40px;
    height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .number-pic {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      > img {
        width: 24px;
        height: 31px;
        display: block;
      }
    }
    .number {
      width: 24px;
      height: 24px;
      line-height: 24px;
      display: block;
      margin: 0 auto;
      background: #0095ff;
      border-radius: 50%;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>
